import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Icon, Modal, Form, Input, Select, Upload } from 'antd';
//@ts-ignore
import LzEditor from 'react-lz-editor';
import Service from '@/public/http/services';
import style from './index.css';
const { Option } = Select;
const CreateModal: React.FC<any> = ({ visible, title, onOK, onCancel, form, dispatch }) => {

    const [curOrgs, setCurOrgs] = useState([]);
    function fetchOrgs() {
        Service.queryAllOrgs().then(data => {
            setCurOrgs(data);
        })
    }
    useEffect(() => {
        if (visible) {
            fetchOrgs()
        }
    }, [visible])

    const formItemLayout = {
        labelCol: { span: 5 },
        wrapperCol: { span: 14 },
    }

    const { getFieldDecorator, setFieldsValue } = form;

    const [curType, setCurType] = useState(0);
    /**
     * @desc 选择入选类型
     */
    const handleChangeType = (value: number) => {
        if(+value !== 1) {
            const _curType = +value
            Service.queryUserByOrgRole({
                orgId: curOrgId,
                // (输入角色ID: 2为董事长 , [3,4,5]为园长, >=6 其他角色)
                roleId: _curType === 2 ? 3 : _curType === 3 ? 7 : null
            }).then(data => {
                setFieldsValue({
                    username: ''
                })
                setCurRoles(data);
            })
        }
        setCurType(value);
    }

    const [curRoles, setCurRoles] = useState([]);
    const [curOrgId, setCurOrgId] = useState(-1);
    /**
     * @desc 切换结构
     */
    const handleChangeOrg = (value: number) => {
        setCurOrgId(value);
        +value !== 1 && setFieldsValue({
            username: ''
        })
        const _curType = +curType
        if(_curType !== 2 && _curType !== 3) return;
        Service.queryUserByOrgRole({
            orgId: value,
            // (输入角色ID: 2为董事长 , [3,4,5]为园长, >=6 其他角色)
            roleId: _curType === 2 ? 3 : _curType === 3 ? 7 : null
        }).then(data => {
            setCurRoles(data);
        })
    }

    return (
        <Modal
            visible={visible}
            title={title}
            okText={'保存'}
            cancelText={'取消'}
            onOk={() => {
                onOK && onOK(form)
            }}
            onCancel={() => {
                onCancel(form)
            }}
            width={'65%'}
        >
            <Form.Item {...formItemLayout} label={'类型'}>
                {
                    getFieldDecorator('type', {
                        initialValue: '',
                        rules: [{ required: true, message: '请选择类型' }],
                    })(<Select className={style.w220} placeholder={'请选择类型'} onChange={handleChangeType}>
                        <Option value={1}>名园成长之路</Option>
                        <Option value={2}>名园长成长之路</Option>
                        <Option value={3}>名师成长之路</Option>
                    </Select>)
                }
            </Form.Item>
            <Form.Item {...formItemLayout} label={'入选园所'}>
                {
                    getFieldDecorator('orgId', {
                        initialValue: '',
                        rules: [{ required: true, message: '请选择入选园所' }],
                    })(<Select className={style.w220} placeholder={'请选择入选园所'} onChange={handleChangeOrg}>
                        {
                            curOrgs!.map((org: any, index) => <Option key={`org-${index}`} value={org.id}>{org.orgName}</Option>)
                        }
                    </Select>)
                }
            </Form.Item>
            {
                curType && +curType !== 1 ? <Form.Item {...formItemLayout} label={'入选园长'}>
                    {
                        getFieldDecorator('username', {
                            initialValue: '',
                            rules: [{ required: true, message: '请选择入选园长' }],
                        })(<Select className={style.w220} placeholder={'请选择入选园长'}>
                            {curRoles!.map((role: any, index) => <Option key={`role-${index}`} value={role.username}>{role.nickname}</Option>)}
                        </Select>)
                    }
                </Form.Item> : null
            }
        </Modal>
    );
}
const WrappedCreateModal = Form.create<any>({ name: 'modalForm' })(CreateModal);
export default connect((state: any) => {
    return {}
})(WrappedCreateModal);
